<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>
      wtfupdate
    </title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript" charset="utf-8" xml:space="preserve"></script>
    <script type="text/javascript" xml:space="preserve">
//<![CDATA[
      jQuery(function() {
          // Look for <li> clicks and toggle the visibility of their child lists:
          $("li").live("click", function () { $(this).children("ul").toggle(); } );

          // Also make it easy to toggle any script blocks individually:
          $("li > pre").parent().click(function () { $(this).children().toggle(); } );

          // Initially hide second+ level lists:
          $("ul > li > ul").hide();

          // Add a descendent count for each branch:
          $("li > ul").each(function() { $(this).before(" (" + $(this).find("li").length + ")"); });

          $("#container > ul").each(function() {
            var list = $(this); // Avoid scoping issues with the nested function:
            $('<p class="toggle">Expand All<\/p>').insertBefore(list).click(function () {
              this._toggle_state = !this._toggle_state;
              list.find("ul").toggle(this._toggle_state);
              $(this).text(this._toggle_state ? "Collapse All" : "Expand All");
            });
          });
      });
    //]]>
    </script>
    <style type="text/css" xml:space="preserve">
/*<![CDATA[*/
    body
    {
      background: #f1f1f1;
      color: #555;
      margin: 0;
      padding: 0;
      text-align: left;
      font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
    }

    #container
    {
      background: #fff;
      margin: 0 auto;
      padding: 4px;
      padding-bottom: 20px;
      width: 680px;
    }

    a
    {
      color: #057fac;
      text-decoration: none;
    }

    a:hover
    {
      color: #999;
      text-decoration: none;
    }

    h1, h2, h3, h4, h5
    {
      color: black;
      text-shadow: rgb(187, 187, 187) 1px 1px 1px;
      padding-bottom: .5em;
      margin: 0;
      margin-top: 1em;
    }

    body > ul
    {
      list-style: none;
      margin-left: 0;
      padding-left: 0;
      font-weight: bold;
    }

    ul
    {
      list-style-type: square;
      margin: 0 5px;
      padding: 0 5px;
      font-weight: normal;
      list-style-position: inside;
    }

    #files, #scripts, .code
    {
      white-space: pre;
      font-family: Monaco, monospace;
      font-size: smaller;
    }

    .code pre {
      font-size: 9px;
      font-family: ProFont, Monaco, monospace;
      border-left: dotted #e8e8e8 1px;
      margin-left: 4px;
      padding-left: 4px;
      background-color: #DDFFEE;
    }

    .toggle
    {
      font-size: small;
      background-color: #e8e8e8;
      color: #000;
      text-align: center;
      margin: 0;
      padding: 2pt;
      border: #999999 solid 1px;
      margin: 0 auto;
      white-space: nowrap;
      width: 8em;
    }

    .toggle:hover {
      background-color: #b4d5ff;
    }

    #description {
      font-size: smaller;
    }
    /*]]>*/
    </style>
  </head>
  <body>
    <div id="container">
      <h1 id="package_name"></h1>
      <div id="description"></div>
      <h2>
        Files
      </h2>
      <ul id="files">
        <li>Files will be listed here
        </li>
        <li>or possibly here
          <ul>
            <li>Or maybe even here?
            </li>
          </ul>
        </li>
      </ul>
      <h2>
        Scripts
      </h2>
      <ul id="scripts">
        <li>Script output will go here
        </li>
        <li>or possibly here
        </li>
      </ul>
    </div>
  </body>
</html>
